---
title: Adding Emotion
description: How to get started with Emotion
sidebar_label: Adding Emotion
---

## Installing bud.js dependencies

To get started with Emotion, install the [@roots/bud-emotion](/extensions/bud-emotion) extension to your project along with a compatible compiler:

- [@roots/bud-babel](/extensions/bud-babel)
- [@roots/bud-swc](/extensions/bud-swc)

We recommend using [@roots/bud-swc](/extensions/bud-swc):

```sh npm2yarn
npm install @roots/bud-swc @roots/bud-emotion --save-dev
```

## Installing production dependencies

Emotion requires the several packages to be installed in your project.

We will try and resolve them for you but it is a good idea to install them as explicit dependencies:

```sh npm2yarn
npm install @emotion/css @emotion/react @emotion/styled --save
```

See the [Emotion documentation](https://emotion.sh/docs/install) for more information.
